<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="16">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <span>晚上好！愿你天黑有灯，下雨有伞</span>
                                    <el-button class="button" text>今天是2022 年9月2日 星期五</el-button>
                                </div>
                            </template>
                             <div class="dirtext">
                                  <p>人生如逆旅，我亦是行人，欢迎使用Vue-ELePlus-Admin,本系统比较适合用于日常工作的制定以及计划报表的生成！</p>    
                             </div>
                        </el-card>
                    </el-col> 
                </el-row>
            </el-col>
            <el-col :span="8">
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>作者信息</span>
                            <el-button class="button" text><el-tag>掘金：摸鱼的汤姆</el-tag></el-button>
                        </div>
                    </template>
                    <div class="dirtext">
                   <el-descriptions :column="2" border>
                    <el-descriptions-item label="Username">Shaohqfspace</el-descriptions-item>
                    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
                    <el-descriptions-item label="Telephone" :span="2">181*****</el-descriptions-item>
                    <el-descriptions-item label="Hobby" :span="2">
                      <el-tag>摸鱼</el-tag>
                    </el-descriptions-item>
                   </el-descriptions>        
                     </div>
                </el-card>
            </el-col>
            <el-col :span="24" style="marginTop:.8rem">
                <el-card class="box-card">
                    <div class="dirtextlist">
                        <el-descriptions title="技术栈" :column="4" border>
                        <el-descriptions-item label="Vue3" label-align="right"><el-tag type="danger">^3.2.37</el-tag></el-descriptions-item>
                        <el-descriptions-item label="Element-Plus" label-align="right"><el-tag>^2.2.14</el-tag></el-descriptions-item>
                        <el-descriptions-item label="windicss" label-align="right" ><el-tag>^3.5.6</el-tag> </el-descriptions-item>
                        <el-descriptions-item label="Echarts"  label-align="right" >
                            <el-tag type="danger">^5.3.3</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="Vite" label-align="right" >
                            <el-tag>^3.0.7</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="TypeScript" label-align="right" >
                            <el-tag>^4.3.5</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="Vuex" label-align="right" >
                            <el-tag type="danger">^4.0.2</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="Vue-Router" label-align="right" >
                            <el-tag type="danger">^4.1.4</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="nprogress" label-align="right" >
                            <el-tag>^0.2.0</el-tag>
                        </el-descriptions-item>
                </el-descriptions>
                    </div>
                
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
export default {

}
</script>

<style lang="scss" scoped>
    .dirtext{
         width: 100%;
         height: 18vh;
         font-size: .8rem;
         color: #666;
    }
    .dirtextlist{
         width: 100%;
         height: 40vh; 
         
    }
</style>